<template>
  <div class="cart-option container">
    <div class="left">
      <checkbox v-model="checkAll"
                class="check">
        全选
      </checkbox>
      <p @click="deleteSelect">删除商品</p>
      <p>移入收藏夹</p>
      <p @click="deleteUnEList">清除无效商品</p>
    </div>

    <div class="right">
      <div> 共 {{ allLength }} 件商品，已选择 {{ length }} 件，商品合计： <span>￥{{ totalPrice }}</span></div>
      <div class="submit"
           @click="submitClick">
        下单结算
      </div>
    </div>
  </div>
</template>

<script lang="ts"
        setup>
import Checkbox from '@/components/library/Checkbox.vue'
import confirm from '@/components/library/Confirm/index'
import message from '@/components/library/Message/index'
import {useCartStore} from '@/stores/cart'
import {useUserStore} from '@/stores/user'
import {storeToRefs} from 'pinia'
import {computed} from 'vue'
import {useRoute, useRouter} from 'vue-router'

let cartStore = useCartStore()
let {eList, totalPrice, allLength, length} = storeToRefs(cartStore)
let userStore = useUserStore()

let router = useRouter()
let route = useRoute()

let checkAll = computed({
  get(): boolean {
    return eList.value.every(item => item.selected)
  },
  set(v: boolean) {
    eList.value.forEach(item => item.selected = v)
    cartStore.updateAll()
  }
})

// 删除选中商品
async function deleteSelect() {
  let res: boolean = await confirm({
    message: '亲，您是否确认删除选中的商品'
  })
  if (!res) return message.warn('用户取消操作')

  // 执行商品删除
  res = await cartStore.deleteESListAll()
  if (!res) message.error('部分商品删除失败')
  message.success('删除成功')
}

// 删除无效商品
async function deleteUnEList() {
  let res: boolean = await confirm({
    message: '亲，您是否确认移除全部无效商品'
  })
  if (!res) return message.warn('用户取消操作')

  // 执行商品删除
  res = await cartStore.deleteUnEListAll()
  if (!res) message.error('部分商品删除失败')
  message.success('删除成功')
}

// 提交购物车
async function submitClick(): Promise<void> {
  // 未登录
  if (!userStore.userInfo.token) {
    let res = await confirm({message: '下单结算需要登录，是否去登录？', title: '温馨提示'})
    if (!res) return
    await router.push({
      path: '/login',
      query: {redirect: route.fullPath}
    })
    return
  }

  // 已登录
  if (!cartStore.length) return message.warn('至少选择一件商品才能结算')
  // 跳转到结算页面
  await router.push('/cart/pay')
}
</script>

<style lang="less"
       scoped>
.cart-option {
  height: 80px;
  background-color: #fff;
  margin-bottom: 20px;
  display: flex;
  justify-content: space-between;
  padding: 0 40px;

  .left {
    display: flex;
    align-items: center;
    justify-content: flex-start;

    .check {
      color: @xtxColor;
    }

    *:not(.check) {
      font-size: 16px;
      margin-left: 20px;
      cursor: pointer;
    }
  }

  .right {
    display: flex;
    align-items: center;
    font-size: 16px;

    span {
      color: @priceColor;
      font-weight: bolder;
    }

    .submit {
      cursor: pointer;
      width: 180px;
      height: 50px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: white;
      background-color: @xtxColor;
      border-radius: 4px;
      margin-left: 20px;
    }
  }
}
</style>